<!--  搜索页 -->
<template>
  <form action="/">
    <van-search
        v-model="searchText"
        show-action
        placeholder="请输入要搜索的标签"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>

  <!--  <van-divider >已选择的标签</van-divider> &lt;!&ndash;分割线&ndash;&gt;-->
  <div v-if="activeIds.length === 0" style="text-align: center; color: #888888">请选择适合你的标签</div>
  <van-row gutter="15" style="padding: 0 15px;"> <!--设置每个标签的布局-->
    <van-col v-for="tag in activeIds" style="margin-top: 10px">
      <van-tag closeable size="large" type="primary" @close="doclose(tag)">
        {{ tag }}
      </van-tag>
    </van-col>
  </van-row>

  <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">标签</van-divider> <!--分割线-->
  <!-- 分类选择-多选模式-标签选择 -->
  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="tagList"
  />

  <!-- 搜索按钮 -->
  <div style="margin: 20px">
    <van-button type="primary" block @click="doSearchResult" color="linear-gradient(to right, #ff6034, #ee0a24)">去搜索</van-button>
  </div>

</template>

<script setup lang="ts">  // 直接在 <script> 标签中写 setup，组合式
import { ref } from 'vue';
import {useRouter} from "vue-router";

//分类选择-多选模式
const activeIds = ref([]); //已选的标签，activeIds 是数组，获取数组中的元素：activeIds.value
const activeIndex = ref(0);
const originTagList = [
  {
    text: '性别',
    children: [
      { text: '男', id: '男' },
      { text: '女', id: '女' },
      { text: '人机', id: '人机' },
    ],
  },
  {
    text: '技术栈',
    children: [
      { text: 'Java', id: 'Java' },
      { text: 'C语言', id: 'C' },
      { text: 'C++', id: 'C++' },
      { text: 'Go', id: 'Go' },
      { text: 'C#', id: 'C#' },
      { text: 'PHP', id: 'PHP' },
      { text: 'HTML', id: 'HTML' },
      { text: 'CSS', id: 'CSS' },
      { text: 'JavaScript', id: 'JavaScript' },
      { text: 'Python', id: 'Python' },
      { text: 'Lua', id: 'Lua' },
      { text: 'Vue', id: 'Vue' },
      { text: 'Spring', id: 'Spring' },
      { text: 'SpringBoot', id: 'SpringBoot' },
      { text: 'Redis', id: 'Redis' },
      { text: '其他', id: '其他' },
    ],
  },
  {
    text: '状态',
    children: [
      { text: '开心', id: '开心' },
      { text: '勿扰', id: '勿扰' },
      { text: '社牛', id: '社牛' },
      { text: '社恐', id: '社恐' },
      { text: 'emo', id: 'emo' },
    ],
  },
];

//搜素栏，搜索结果也就是改变显示存在的标签
const searchText = ref('');
let tagList = ref(originTagList); //创建响应式对象，初始值为 标签列表
const onSearch = (val) => { //根据搜索的内容文本，过滤标签列表中的子标签
  tagList.value = originTagList.map(parentTag =>{
    const tempChildren =  [...parentTag.children];
    const tempParentTag =  {...parentTag};
    tempParentTag.children = tempChildren.filter(item => item.text.toLowerCase().includes(searchText.value.toLowerCase()))
    return tempParentTag;
  })
};
const onCancel = () => { //取消
  searchText.value = ''; //清空输入框的内容
  tagList.value = originTagList; //响应式对象刷新为初始值
}

//移除 已选择的标签
const doclose = (tag) => {
  activeIds.value = activeIds.value.filter(item => { //filter 过滤
    return item !== tag; //保留不等于 tag 的元素
  })
}

//搜索跳转
const router = useRouter();
const doSearchResult = () => {
  console.log("标签", activeIds.value)

  router.push({
    path:'/user/list',
    query: {
      tags: activeIds.value,
    }
  })
}


</script>

<style scoped>

</style>